<template>
  <div>
    <van-nav-bar
      title="北京动物园"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="detail">
      <img :src="data.src" alt="" />
      {{ data.title }}
      {{ data.word }}
      <van-rate
        v-model="data.count"
        :size="25"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="查看门票"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>
<script>
import { Toast } from 'vant'
import axios from 'axios'
export default {
  data() {
    return {
      data: {},
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back('/')
    },
    onClickRight() {
      Toast('按钮')
    },
    onClickIcon() {
      Toast('点击图标')
    },
    onClickButton() {
      Toast('点击按钮')
    },
    async getData(id) {
      let resp = await axios.get('/api/detail', { params: { id } })
      console.log(resp)
      this.data = resp.data.item
    },
  },
  created() {
    const { id } = this.$route.params
    this.getData(id)
  },
}
</script>
<style lang="scss">
.detail {
  width: 100%;
  height: 300px;
  img {
    width: 100%;
  }
}
</style>
